<template>
  <div class="app-container">
    <div v-if="!isLoadFinish && operType == 'edit'" class="empty-info">
      <img :src="loading" alt="loading" width="200px">
    </div>
    <template v-else>
      <!--通过表单配置方式渲染-->
      <el-row v-if="formBuildConfig.length>0" class="center-board-row" :gutter="formConf.gutter">
        <el-form
          ref="form"
          :model="form"
          :size="formConf.size"
          :label-position="formConf.labelPosition"
          :label-width="formConf.labelWidth + 'px'"
        >
          <DraggableItem
            v-for="(element, index) in formBuildConfig"
            :key="element.buildKey+nowRenderKey+index"
            :name="'my-component-' + element.formId"
            :drawing-list="formBuildConfig"
            :element="element"
            :index="index"
            :form-conf="formConf"
            :formData="form"
            :formDataOptions="formDataOptions"
            @changeFormData="changeFormData"
            @assignFormData="assignFormData"
            @changeFormDataOptions="changeFormDataOptions"
            @btnClickHander="btnClickHander"
            @OpenSearchModel="openSearchModel"
          />
        </el-form>
      </el-row>
      <!--通过平台默认表单方式渲染-->
      <el-form v-else ref="form" :model="init">
        <FormItem v-for="(item,index) in init.fieldInfo" :itemInfo="item" :key="index" :index="index"
                  :itemType="operType"
                  @ItemValChange="ItemValChange"
                  @OpenSearchModel="openSearchModel"
        ></FormItem>
      </el-form>
    </template>
    <!--对话框下方操作按钮-->
    <div v-if="needOperBtn" class="dialog-footer">
      <el-button type="primary" @click="submitForm" v-loading.fullscreen.lock="isSubmitForm" :disabled="isSubmitForm">
        确 定
      </el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>

    <el-dialog title="关联数据"
               :visible.sync="isOpenSearch"
               class="addendum-dialog"
               :fullscreen="true"
               :close-on-click-modal="false"
               :destroy-on-close="true"
               append-to-body>
      <SearchModel :model="SearchModel" @ChooseSearchModelData="ChooseSearchModelData"/>
      <div class="dialog-footer">
        <el-button @click="closeSearchModel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { add, update } from '@/views/youshuda/api/BaseApi'
import { TableDetailMixins } from '@/views/youshuda/mixins/TableDetailMixins'

export default {
  name: 'FormEdit',
  mixins: [TableDetailMixins],
  methods: {
    /** 提交按钮 */
    submitForm() {
      //禁用提交按钮
      this.isSubmitForm = true
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.enterType == 'Form') {
            /**
             * 业务表单处理
             */
            if (this.operType == 'edit') {
              update(this.prefixUrl, this.form).then(response => {
                this.msgSuccess('修改成功')
                this.$emit('cancel', { isRef: true })
              }).finally(() => {
                this.isSubmitForm = false
              })
            } else {
              add(this.prefixUrl, this.form).then(response => {
                this.msgSuccess('新增成功')
                this.$emit('cancel', { isRef: true })
              }).finally(() => {
                this.isSubmitForm = false
              })
            }
          } else {
            /**
             * 流程表单处理
             */
            //TODO 流程表单处理

          }
        } else {
          //解除禁用提交按钮
          this.isSubmitForm = false
        }
      })
    }
  }
}
</script>

<style scoped>
  .app-container{
    height: 100%;
  }
  .dialog-footer {
    position: absolute;
    right: 30px;
    bottom: 30px;
  }

  textarea[readonly="readonly"],
  input[readonly="readonly"] {
    background-color: #F3F3F4 !important;
  }

  .empty-info {
    height: calc(100%);
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
